<template>
    <div class="topic">
        <!-- 专题页面 -->

        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :immediate-check = "false"
            >
            <ul>
                <li class="list" v-for="item in list" :key="item.id" @click="goDetailaction(item.id)">
                    <img :src="item.scene_pic_url" alt="">
                    <p class="title">{{item.title}}</p>
                    <p class="subtitle">{{item.subtitle}}</p>
                    <p class="price_info">{{item.price_info}}元起</p>
                </li>
            </ul>
        </van-list>
        
        <tabbar></tabbar>

    </div>
</template>

<script>
import { listaction } from "@/api/topic"
import tabbar from "@/components/tabbar.vue"

export default {
    data() {
        return {
            list:[],
            loading:false,
            finished:false,
            start:1
        };
    },
    components:{
        tabbar
    },
    computed: {

    },
    created() {
        this.init();
    },
    mounted() {

    },
    methods: {
        onLoad(){
            console.log("onload方法执行了");
            // 请求数据
            this.init();
        },
        init(){
            listaction({
                page:this.start  // 3
            })
            .then(res =>{
                console.log(res);
                this.list.push(...res.data);
                this.start++; // 4
                // this.start 当前页数 >  >= res.total  总页数 4
                if(this.start  >  res.total){
                    this.finished = true;
                }
                this.loading = false
            })
        },
        goDetailaction(val){
            this.$router.push({path:"/topic/detailaction",query:{val}})
        }
    },
};
</script>

<style lang="scss">
body{
    background-color: #f4f4f4;
}

</style>
<style scoped lang="scss">
.topic{
    .list{
        img{
            width: 100%;
        }
    }
}




.list{
    margin-bottom: 6px;
    background-color: #fff;
}

.list .title{
   font-size: 17px;
   color: #333;
   margin-top: 12px;
}
.list .subtitle{
    color: #999;
    margin-top: 12px;
}
.list .price_info{
    color: #b4282d;
    font-size: 13px;
    margin-top: 9px;
    padding-bottom: 12px;
}
</style>
